<template>
    <div>
    <div class="content" v-for="(item,i) in list" 
    :key="item.id"
    :class="i === 0 ? 'content1' : ''"
    >
    <div class="con">
        <i :class="item.icon"></i>
       <dl>
           <dt>{{item.name}}<span>{{item.time}}</span></dt>
           <dd>{{item.news}}</dd>

       </dl>
       </div>
    </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
             
             list:[
                 {
                     icon:"el-icon-message-solid",
                     name:"系统通知",
                     news:"系统升级公告，最新版本2.01",
                     time:"9月20日 20：30",
                     id:1
                 },
                  {
                     icon:"el-icon-chat-dot-square",
                     name:"新品上市",
                     news:"时尚仙女裙网红小仙女必备，价格优惠",
                     time:"9月20日 20：30",
                     id:2
                 },
                  {
                     icon:"el-icon-chat-dot-square",
                     name:"新品上市",
                     news:"时尚仙女裙网红小仙女必备，价格优惠",
                     time:"9月20日 20：30",
                     id:3
                 },
                  {
                     icon:"el-icon-chat-dot-square",
                     name:"新品上市",
                     news:"时尚仙女裙网红小仙女必备，价格优惠",
                     time:"9月20日 20：30",
                     id:4
                 },
             ]
            }
        },
        methods:{
            me(){
                this.$router.push('/mine')
            }
        }
    }
</script>

<style scoped>
.content{
    width: 100vw;
    height: auto;
    /* background: cyan; */
}
.content dl{
    width: 100vw;
    height: 8vh;
    /* background: darkseagreen; */
    border-bottom: 1px solid #eee;
    margin-left: 3vw;
}
.content dt{
    font-size: 2.5vh;
}
.content dt span{
    margin-left: 42vw;
    font-size: 1.5vh;
    color: #ccc;
}
.content dd{
    font-size: 2vh;
    margin-top: 01.5vh;
}

.con{
    display: flex;
    align-items: center;
		margin-top: 3vh;
}
.con i {
    font-size: 4vh;
    margin-left: 3vw;
    color:red;
}

</style>